<template>
  <div class="f-menu" :style="{ width: $store.state.asideWidth }">
    <!-- default-active="2" -->
    <el-menu
      :default-active="defaultActive"
      unique-opened
      :collapse="isCollapse"
      class="border-0"
      @select="handleSelect"
      :collapse-transition="false"
    >
      <template v-for="(item, index) in MenusScreen" :key="index">
        <el-sub-menu
          v-if="item.child && item.child.length > 0"
          :index="item.name"
        >
          <template #title>
            <el-icon>
              <Icon :icon="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <!-- 如果是二级菜单 -->
          <el-menu-item
            v-for="(item2, index2) in item.child"
            :key="index2"
            :index="item2.frontpath"
          >
            <el-icon>
              <Icon :icon="item2.icon" />
            </el-icon>
            <span>{{ item2.name }}</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 如果是一级菜单 -->
        <el-menu-item v-else :index="item.frontpath">
          <el-icon>
            <component :is="item.url"></component>
            <Icon :icon="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>

      <template v-for="(item, index) in asideMenus" :key="index">
        <el-sub-menu
          v-if="item.child && item.child.length > 0"
          :index="item.name"
        >
          <template #title>
            <el-icon>
              <Icon :icon="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <!-- 如果是二级菜单 -->
          <el-menu-item
            v-for="(item2, index2) in item.child"
            :key="index2"
            :index="item2.frontpath"
          >
            <el-icon>
              <Icon :icon="item2.icon" />
            </el-icon>
            <span>{{ item2.name }}</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 如果是一级菜单 -->
        <el-menu-item v-else :index="item.frontpath">
          <el-icon>
            <Icon :icon="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { computed, ref,getCurrentInstance } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
import { Icon } from "@iconify/vue";

// import { getTest } from '~/api/test'
const { proxy } = getCurrentInstance();
// vue-lazyload 图片懒加载第三方插件 一般UI库都自带有图片懒加载
const router = useRouter();
const store = useStore();
const route = useRoute();

// 默认选中
const defaultActive = ref(route.path);

// 监听路由变化
onBeforeRouteUpdate((to, from) => {
  defaultActive.value = to.path;
});
// 跳转大屏
// const toScreen = () => {
//   //   this.router.push('/src/static/screen.html')
//   window.location.href = '/src/static/screen.html'
// }
// 是否折叠
const isCollapse = computed(() => !(store.state.asideWidth === "250px"));

const MenusScreen = ref([
  {
    name: proxy.$t("进入大屏"),
    desc: "enter",
    icon: "ri:computer-line",
    frontpath: "/screen_app",
  },
]);
// const asideMenus = computed(() => store.state.menus)
const asideMenus = ref([
  {
    id: 5,
    name: proxy.$t("后台面板"),
    desc: "index",
    frontpath: null,
    icon: "ion:home-outline",
    method: "GET",
    child: [
      {
        id: 10,
        name: proxy.$t("主控台"),
        desc: "index",
        frontpath: "/",
        icon: "ion:home",
        method: "GET",
        child: [],
      },
    ],
  },
  {
    id: 173,
    name: proxy.$t("流量统计"),
    desc: "",
    frontpath: "/user/list",
    icon: "clarity:list-line",
    method: "GET",
    child: [],
  },
  {
    id: 22,
    name: proxy.$t("协议统计"),
    desc: "user_user-level_list",
    frontpath: "/level/list",
    icon: "wpf:statistics",
    method: "GET",
    child: [],
  },
  {
    id: 7,
    name: proxy.$t("任务调度"),
    desc: "",
    frontpath: "/goods/list",
    icon: "fluent:cloud-flow-24-regular",
    method: "GET",
    child: [],
  },
  // {
  //   id: 8,
  //   name: '数据导出',
  //   desc: '',
  //   frontpath: '/manager/list',
  //   icon: 'prime:file-export',
  //   method: 'GET',
  //   child: []
  // },
  // {
  //   id: 10,
  //   name: '测试测试',
  //   desc: '',
  //   frontpath: '/order/list',
  //   icon: 'prime:file-export',
  //   method: 'GET',
  //   child: []
  // },
]);

const handleSelect = (e) => {
  //   console.log(e) path路径
  router.push(e);
};
</script>
<style>
.f-menu {
  transition: all 0.2s;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  @apply shadow-md fixed bg-light-50;
}

.f-menu::-webkit-scrollbar {
  width: 0;
}

.image {
  margin: 0 20px 0 5px;
}
</style>
